<!DOCTYPE html>
<html style="background-color: #F1F4FB">

<head>
    <meta charset="utf-8">
    <title>书著统计页面</title>
    <!--公用样式-->
    <link rel="stylesheet" type="text/css" href="${re.contextPath}/plugin/common/css/comment.css"/>
    <link rel="stylesheet" type="text/css" href="${re.contextPath}/plugin/supplier/common/css/style.css"/>
    <!--extended-->
    <link rel="stylesheet" type="text/css" href="${re.contextPath}/plugin/common/css/extended.css"/>
    <!--Layui-->
    <link rel="stylesheet" href="${re.contextPath}/plugin/layui/css/layui.css" media="all"/>
    <!--公用样式JS-->
    <script type="text/javascript" src="${re.contextPath}/plugin/jquery/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="${re.contextPath}/plugin/common/js/comment.js"></script>
    <script type="text/javascript" src="${re.contextPath}/plugin/layui/layui.js" charset="utf-8"></script>
</head>
<style>
    .Right {
        overflow-y: auto;
        width: 100%;
        left: 16%;
        top: 144px;
    }

    .layui-table-cell {
        text-align: center;
        font-size: 14px;
        padding: 0 5px;
        height: auto;
        overflow: visible;
        text-overflow: inherit;
        white-space: normal;
        word-break: break-all;
    }

    .tab-name-unselect {
        font-weight: bolder;
        font-size: 18px !important;
        color: #888888;
    }

    .tab-name-select {
        font-weight: bolder;
        font-size: 18px !important;
        color: #1e9fff !important;
        background-color: #ffffff !important;
    }

    .layui-tab-brief > .layui-tab-more li.layui-this:after, .layui-tab-brief > .layui-tab-title .layui-this:after {
        border-bottom: 2px solid #1e9fff !important;
    }

    .layui-laypage-limits select {
        width: 70px;
    }
</style>

<body>
<!--头部-->
<!--容器-->
<div class="layui-container"
     style="background-color: #ffffff;width:96%;margin-top:60px;padding:16px;border-radius: 10px">
    <!--tab页面-->
    <div class="layui-tab layui-tab-brief" lay-filter="demo">
        <ul id="tab-uls" class="layui-tab-title" style="margin: 0px 10px 10px 10px">
            <li class="layui-this tab-name-select">按人统计</li>
            <li class="tab-name-unselect">按书著名称统计</li>
        </ul>
        <div class="layui-tab-content" style="height: 90px;">
            <div class="layui-tab-item layui-show" style="margin-left: 0px">
                <!--筛选行-->
                <div style="background-color: #F1F4FB;border-radius: 5px;padding:14px 10px;">
                    <form id="query-form-one">
                        <div class="layui-row">
                            <!--姓名-->
                            <div class="layui-col-md2">
                                <span>姓名:</span>
                                <input id="name" class="layui-input layui-input-inline" type="text" placeholder="姓名"
                                       style="width: 80%">
                            </div>
                            <!--时间-->
                            <div class="layui-col-md4" style="padding-left:2%">
                                <span>版次时间:</span>
                                <input id="bc_date_start0" class="layui-input layui-input-inline" type="text"
                                       style="width: 32%;" placeholder="开始时间">
                                <span>至</span>
                                <input id="bc_date_end0" class="layui-input layui-input-inline" type="text"
                                       style="width: 32%;" placeholder="结束时间">
                            </div>
                            <div class="layui-col-md3" style="padding-left:1%">
                                <span>出版社:</span>
                                <input id="cbsname" class="layui-input layui-input-inline" type="text" placeholder="出版社"
                                       style="width: 80%">
                            </div>
                            <div class="layui-col-md2">
                                <span>主编:</span>
                                <input id="zbname" class="layui-input layui-input-inline" type="text" placeholder="主编"
                                       style="width: 80%">
                            </div>
                        </div>
                        <div class="layui-row" style="margin-top: 10px;">
                            <div class="layui-col-md3">
                                <span>副主编:</span>
                                <input id="fzbname" class="layui-input layui-input-inline" type="text" placeholder="副主编"
                                       style="width: 80%">
                            </div>
                            <div class="layui-col-md1" style="text-align: end;width: 15%;float: right;">
                                <input class="layui-btn layui-btn-normal" style="border-radius:5px;" type="button"
                                       value="筛选"
                                       onclick="query()">
                                <input class="layui-btn layui-btn-normal ml10" type="button"
                                       style="border-radius:5px;background-color: #FF5722;" value="重置"
                                       onclick="resetQuery(0)">
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <div class="layui-tab-item" style="margin-left: 0px">
                <!--筛选行-->
                <div style="background-color: #F1F4FB;border-radius: 5px;padding:14px 10px;">
                    <form id="query-form-two">
                        <div class="layui-row">
                            <!--权利要求书名称-->
                            <div class="layui-col-md2" style="padding-left:1%">
                                <span>书著名称:</span>
                                <input id="qlyqs_name" class="layui-input layui-input-inline" type="text"
                                       placeholder="书著名称"
                                       style="width: 50%">
                            </div>
                            <!--时间-->
                            <div class="layui-col-md4" style="padding-left:2%">
                                <span>版次时间:</span>
                                <input id="bc_date_start1" class="layui-input layui-input-inline" type="text"
                                       style="width: 32%;" placeholder="开始时间">
                                <span>至</span>
                                <input id="bc_date_end1" class="layui-input layui-input-inline" type="text"
                                       style="width: 32%;" placeholder="结束时间">
                            </div>
                            <div class="layui-col-md3" style="padding-left:1%">
                                <span>出版社:</span>
                                <input id="cbsname1" class="layui-input layui-input-inline" type="text"
                                       placeholder="出版社"
                                       style="width: 80%">
                            </div>
                            <div class="layui-col-md2">
                                <span>主编:</span>
                                <input id="zbname1" class="layui-input layui-input-inline" type="text" placeholder="主编"
                                       style="width: 80%">
                            </div>
                        </div>
                        <div class="layui-row" style="margin-top: 10px;">

                            <div class="layui-col-md3">
                                <span>副主编:</span>
                                <input id="fzbname1" class="layui-input layui-input-inline" type="text"
                                       placeholder="副主编"
                                       style="width: 80%">
                            </div>
                            <div class="layui-col-md1" style="text-align: end;width: 20%;float: right;">
                                <input class="layui-btn layui-btn-normal" style="border-radius:5px;" type="button"
                                       value="筛选"
                                       onclick="query()">
                                <input class="layui-btn layui-btn-normal ml10" type="button"
                                       style="border-radius:5px;background-color: #FF5722;" value="重置"
                                       onclick="resetQuery(1)">
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
<div class="layui-container"
     style="background-color: #ffffff;width:96%;margin-top:30px;padding:16px;border-radius: 10px">
    <div class="layui-row">
        <div class="layui-col-md3 layui-col-md-offset9">
            <@shiro.hasPermission name="search:export">
                <input class="layui-btn layui-btn-normal layui-btn-sm fr ml10" type="button" value="导出Excel"
                       onclick="exportTable()">
            </@shiro.hasPermission>
            <@shiro.hasPermission name="search:view">
                <input class="layui-btn layui-btn-danger layui-btn-sm fr" type="button" value="预览Excel"
                       onclick="viewTable()">
            </@shiro.hasPermission>
        </div>
    </div>
    <div class="layui-row">
        <table id="statisticstable" lay-filter="statisticstable">

        </table>
    </div>
</div>


<div style="height: 50px"></div>
<#--	<!--右侧内容&ndash;&gt;-->
<script type="text/javascript" src="${re.contextPath}/plugin/tools/tool.js"></script>
<script type="text/javascript" charset="utf-8" src="${re.contextPath}/plugin/common/js/tabs.js"></script>
<script type="text/javascript" src="${re.contextPath}/pageoffice.js" id="po_js_main"></script>
<script type="text/html" id="index">
    {{d.LAY_INDEX}}
</script>
<#--<script type="text/html" id="xmjb">-->
<#--	{{# if(d.flag){ }}-->
<#--	<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="update"><i class="layui-icon">&#xe640;</i>编辑</a>-->
<#--	{{# }else{ }}-->
<#--	<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="handle"><i class="layui-icon">&#xe640;</i>办理</a>-->
<#--	{{# } }}-->
<#--</script>-->
<script type="text/javascript">
    var table, tableIns, laydate, form, layer, element;
    var defaultTabInd = 0;
    layui.use(['laydate', 'table', 'form', 'layer', 'element'], function () {
        laydate = layui.laydate;
        table = layui.table;
        form = layui.form;
        layer = layui.layer;
        element = layui.element;//Tab的切换功能，切换事件监听等，需要依赖element模块
        //执行一个laydate实例
        laydate.render({
            elem: '#bc_date_start0' //见刊日期开始
        });
        laydate.render({
            elem: '#bc_date_end0' //见刊日期结束
        });
        laydate.render({
            elem: '#bc_date_start1' //见刊日期开始
        });
        laydate.render({
            elem: '#bc_date_end1' //见刊日期结束
        });


        //一些事件触发
        element.on('tab(demo)', function (data) {
            console.log(data);
            if (defaultTabInd == data.index) {
                console.log("没事瞎点");
            } else {
                defaultTabInd = data.index;
                $('#tab-uls li').addClass("tab-name-unselect");
                $('#tab-uls li').removeClass("tab-name-select");
                $('#tab-uls li:eq(' + data.index + ')').removeClass("tab-name-unselect");
                $('#tab-uls li:eq(' + data.index + ')').addClass("tab-name-select");
                getTableByIndex(data.index);
                if (data.index == '2') {
                    //按时间统计,不需要筛选行:
                    $('.layui-tab-content').attr('hidden', 'hidden');
                } else {
                    $('.layui-tab-content').removeAttr('hidden');
                }
            }
        });

        getTable1();

    });

    function getTableByIndex(index) {
        //根据条件加载表格:
        if (index == 0) {
            //按照人统计
            getTable1();
        } else if (index == 1) {
            //按权利要求书统计
            getTable2();
        } else if (index == 2) {
            //按按论文名称统计
            getTable3();
        }
    }

    function getSearchData() {
        var start = $('#bc_date_start' + defaultTabInd).val();
        var end = $('#bc_date_end' + defaultTabInd).val();
        var jsondata = {};
        jsondata['obj1'] = start;
        jsondata['obj2'] = end;
        if (defaultTabInd == 0) {
            jsondata['obj3'] = $('#name').val();
            // 出版社
            jsondata['spfF2'] = $('#cbsname').val();
            // 主编
            jsondata['spfF4'] = $('#zbname').val();
            //obj9
            // 副主编
            jsondata['obj9'] = $('#fzbname').val();

        } else {
            jsondata['spfF1'] = $('#qlyqs_name').val();

            jsondata['spfF2'] = $('#cbsname1').val();
            // 主编
            jsondata['spfF4'] = $('#zbname1').val();

            jsondata['obj9'] = $('#fzbname1').val();
        }
        // 出版社 20211004
        //spfF1

        // 主编
        //spfF4
        // 副主编


        return jsondata;
    }

    //根据    计划类型    获取表格数据:
    //表头不定列
    function getTable1() {
        var jsondata = getSearchData();
        // console.log(jsondata)
        //方法级渲染  初始为计划类别统计
        tableIns = table.render({
            id: 'statisticstable',
            elem: '#statisticstable',
            url: '/search/decision/form/statistics/110006?index=0',
            height: "full",
            page: true,
            where: jsondata,
            cols: [[
                {field: '', title: '序号', templet: '#index', width: '10%'},
                {field: 'name', title: '姓名', width: '18%'},
                {
                    field: 'totalCount',
                    title: '总篇数',
                    width: '18%',
                    event: 'showCountDetail',
                    style: 'color: dodgerblue;cursor: pointer'
                },
                {field: 'zhuBianCount', title: '主编数', width: '18%'},
                {field: 'fuZhuBianCount', title: '副主编数', width: '18%'},
                {field: 'bianWeiCount', title: '编委数', width: '18%'}
            ]],
            done: function (res, currentCount) {

            }
        });
        //工具条事件
        table.on('tool(statisticstable)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
            var jsondata = getSearchData();
            // console.log(obj);
            // console.log(data);
            // console.log(layEvent);
            // console.log(tr);
            jsondata['obj3'] = data.name;
            if (layEvent.indexOf('showCountDetail') != -1) { //查看
                var count = data['totalCount'];
                if (!count || count == 0) {
                    return;
                }
                var searchDataJson = JSON.stringify(jsondata);
                localStorage.setItem("count-detail-filter-sz", searchDataJson);
                var w = ($(window).width() * 0.8);
                var h = ($(window).height() * 0.8);
                layer.open({
                    type: 2,
                    title: false,
                    closeBtn: 1,
                    shade: 0.8,
                    area: [w + 'px', h + 'px'],
                    content: '/search/decision/form/statistics/showCountDetailPage/110006?index=' + defaultTabInd,
                    success: function (layero, index) {

                    },
                    end: function () {
                        localStorage.removeItem("count-detail-filter-sz");
                    }
                })
            }
        });

    }

    //根据    项目级别    获取表格数据:
    //表头不定列
    function getTable2() {
        var jsondata = getSearchData();
        // console.log('jsondata');
        // console.log(jsondata);
        //方法级渲染  初始为计划类别统计
        tableIns = table.render({
            id: 'statisticstable',
            elem: '#statisticstable',
            url: '/search/decision/form/statistics/110006?index=1',
            height: "full",
            page: true,
            where: jsondata,
            cols: [[
                {field: '', title: '序号', templet: '#index', width: '20%'},
                {field: 'year', title: '年份', width: '40%'},
                {field: 'totalCount', title: '书著总篇数', width: '40%'}

            ]],
            done: function (res, currentCount) {

            }
        });

    }

    //根据    项目负责人    获取表格数据:
    function getTable3() {
        var jsondata = getSearchData();
        // console.log('jsondata');
        // console.log(jsondata);
        layerAjaxGet('/search/decision/form/statistics/tableHead/110006?index=2', jsondata, '', function (res) {
            // console.log(res);
            if (res.flag && res.data) {
                //设置表格:
                //方法级渲染  初始为计划类别统计
                tableIns = table.render({
                    id: 'statisticstable',
                    elem: '#statisticstable',
                    url: '/search/decision/form/statistics/110006?index=2',
                    height: "full",
                    page: true,
                    where: jsondata,
                    cols: [res.data],
                    done: function (res, currentCount) {

                    }
                });

            }
        })
    }

    function merge(res, curr, count) {
        var data = res.data;
        var mergeIndex = 0;//定位需要添加合并属性的行数
        var mark = 1; //这里涉及到简单的运算，mark是计算每次需要合并的格子数
        var columsName = ['name'];//需要合并的列名称
        var columsIndex = [2];//需要合并的列索引值

        for (var k = 0; k < columsName.length; k++) {//这里循环所有要合并的列
            var trArr = $(".layui-table-body>.layui-table").find("tr");//所有行
            for (var i = 1; i < res.data.length; i++) { //这里循环表格当前的数据
                var tdCurArr = trArr.eq(i).find("td").eq(columsIndex[k]);//获取当前行的当前列
                var tdPreArr = trArr.eq(mergeIndex).find("td").eq(columsIndex[k]);//获取相同列的第一列
                if (data[i][columsName[k]] === data[i - 1][columsName[k]]) { //后一行的值与前一行的值做比较，相同就需要合并
                    console.log(data[i][columsName[k]]);
                    console.log(data[i - 1][columsName[k]]);
                    mark += 1;
                    tdPreArr.each(function () {//相同列的第一列增加rowspan属性
                        var prev = $(this).prev();
                        var next = $(this).next();
                        $(this).prev().prev().attr("rowspan", mark);
                        $(this).next().attr("rowspan", mark);
                        $(this).attr("rowspan", mark);
                    });
                    tdCurArr.each(function () {//当前行隐藏
                        $(this).prev().prev().css("display", "none");
                        $(this).next().css("display", "none");
                        $(this).css("display", "none");
                    });
                } else {
                    mergeIndex = i;
                    mark = 1;//一旦前后两行的值不一样了，那么需要合并的格子数mark就需要重新计算
                }
            }
        }
    }

    //根据    人员统计    获取表格数据:


    function query() {
        getTableByIndex(defaultTabInd);
    }

    function resetQuery(i) {
        switch (i) {
            case 0:
                document.getElementById('query-form-one').reset();
                break;
            case 1:
                document.getElementById('query-form-two').reset();
                break;
        }
        var jsondata = {
            obj1: "",
            obj2: "",
            obj9: "",
            spfF1: "",
            spfF2: "",
            spfF4: "",
        }
        table.reload('statisticstable', {
            where: jsondata
        })
    }

    function viewTable() {
        var jsondata = getSearchData();
        layerAjaxGet('/search/decision/form/statistics/viewTable/110006?index=' + defaultTabInd, jsondata, '', function (res) {
            if (res.flag) {
                if (res.data) {
                    var w = ($(window).width() * 0.8);
                    var h = ($(window).height() * 0.8);
                    POBrowser.openWindowModeless('/sys/office/openwordTemp?ft=1&fid=' + res.data, 'width=1200px;height=800px;', '{}')
                }
            }
        })
    }

    function exportTable() {

        var para = '';

        //版次时间开始日期
        var bc_startSelect = $('#bc_date_start' + defaultTabInd).val();
        if (bc_startSelect) {
            para = para + '&obj1=' + bc_startSelect;
        }
        //版次时间结束日期
        var bc_endSelect = $('#bc_date_end' + defaultTabInd).val();
        if (bc_endSelect) {
            para = para + '&obj2=' + bc_endSelect;
        }

        if (defaultTabInd == 0) {
            para = para + '&obj3=' + $('#name').val();
            para = para + '&spfF2=' + $('#cbsname').val();
            para = para + '&spfF4=' + $('#zbname').val();
            para = para + '&obj9=' + $('#fzbname').val();
        } else {
            para = para + '&spfF1=' + $('#qlyqs_name').val();
            para = para + '&spfF2=' + $('#cbsname1').val();
            para = para + '&spfF4=' + $('#zbname1').val();
            para = para + '&obj9=' + $('#fzbname1').val();
        }

        var url = '/search/decision/form/export/statistics/110006?index=' + defaultTabInd + para;
        location.href = url;
    }

    $(function () {
        //回车事件
        $(document).keydown(function (e) {
            // 兼容FF和IE和Opera
            var theEvent = e || window.event;
            var code = theEvent.keyCode || theEvent.which || theEvent.charCode;
            if (code == 13) {
                query();
            }
            return true;
        });
    })
</script>
</body>

</html>